<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<script>
	function check_email_same(email_1,email_2){
		if (email_1 != ""){
			if (email_1 == email_2){
				return 1;
			}else{
				return 0;
			}
		}
	}
	
	function check_password(password){
		if (password.length < 8 || password.length > 20){
			return 0;
		}else {
			return 1;
		}
	}
	
	function check_nicname(nic,name){
		if (nic.length < 1 || name.length < 1 || (nic+name).length > 20){
			return 0;
		}else {
			return 1;
		}
	}
	
	$(function(){
		
		$("#name").bind("keyup",function(){
			var nic = $("#nic").val();
			var name = $("#name").val();
			
			if (check_nicname(nic,name)){
				$("#lbl_nicname").text("");
			}else{
				$("#lbl_nicname").text("성과 이름은 1글자 이상 이어야하며, 도합 20자 이내여야 합니다.");
			}
		});
		
		$("#email_re").bind("keyup",function(){
			var email_1 = $("#email").val();
			var email_2 = $("#email_re").val();
			
			if (check_email_same(email_1,email_2)){
				$("#lbl_email").text("");
			}else{
				$("#lbl_email").text("이메일이 일치하지 않습니다.");
			}
		});
		
		$("#password").bind("keyup",function(){
			var password = $("#password").val();
			
			if (check_password(password)){
				$("#lbl_password").text("");
			}else {
				$("#lbl_password").text("비밀번호는 8~20자만 가능 합니다.");
			}
		});
		
		$("#frm_account").bind("submit",function(){
			var nic = $("#nic").val();
			var name = $("#name").val();
			var email_1 = $("#email").val();
			var email_2 = $("#email_re").val();
			var password = $("#password").val();
			
			if (!check_nicname(nic,name) || !check_email_same(email_1,email_2) || !check_password(password)){
				alert('가입정보를 다시 확인 해주세요.');
				return false;
			}
		});
	});
</script>
<div class="container" style="width:30%;padding-top:15px;">
	  <form class="form-signup" id="frm_account" role="form" action="/BookProject/Account" method="post">
        <br>
        <div class="form-group">
        <input type="text" name = "nic" id="nic" class="form-control" placeholder="성" required autofocus>
        </div>
        <div class="form-group">
        <input type="text" name = "name" id="name" class="form-control" placeholder="이름" required>
    		<label id="lbl_nicname" style="color:red;font-weight:bold;float:right"></label>
        </div>
        <div class="form-group">
        <input type="email" name="email" id="email" class="form-control" placeholder="이메일" required>
        </div>
        <div class="form-group">
        <input type="email" name="email_re" id="email_re" class="form-control" placeholder="이메일 재입력" required>
        <label id="lbl_email" style="color:red;font-weight:bold;float:right"></label>
        </div>
        <div class="form-group">
        <input type="password" name="password" id="password" class="form-control" placeholder="비밀번호" required>
     		<label id="lbl_password" style="color:red;font-weight:bold;float:right"></label>
        </div>
        <div class="form-group">
		<select class="form-control" name = "year" style="width: 100px;float: left;">
   		<%
   		for(int i = 1960;i <= 2014;i++) {
   			%><option><%=i%></option><%
   		}%>
   		</select>
	
		<select class="form-control" name = "month" style="width: 80px;float: left;">
   		<%
   		for(int i = 1;i <= 12;i++) {
   			%><option><%=i%></option><%
   		}%>
   		</select>
	
  		<select class="form-control" name = "day" style="width: 80px;">
   		<%
   		for(int i = 1;i <= 31;i++) {
   			%><option><%=i%></option><%
   		}%>
   		</select>
   		</div>
  		<label>
    		<input type="radio" name="sex" id="optionsRadios1" value="m" checked>
  			남
   		</label>
   		<label>
       		<input type="radio" name="sex" id="optionsRadios2" value="w">
  			여
       	</label>
       	<br>
       	<label>
       	가입하기을 클릭하시면 약관에 동의하며 쿠키 사용을 포함한 데이터 사용 정책을 숙지하신 것으로 간주됩니다.
       	</label>
        <button class="btn btn-lg btn-primary btn-block" type="submit">가입 하기</button>
      </form>
</div>